<template>
  <div>
    <el-dialog
      title="查看权限"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1000px"
      top="25vh"
    >
      <el-scrollbar ref="scroll" wrap-class="scrollbar-wrapper">
        <el-row :gutter="20">
          <el-col :span="8">
            <span style="display:inline-block;width:80px;font-size:14px;color:#999999">角色</span>
            <span style="margin-left:22px;font-size:18px;color:#409EFF">{{ name }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:22px">
          <el-col :span="8">
            <span style="display:inline-block;width:80px;font-size:14px;color:#999999">角色描述</span>
            <span style="margin-left:22px;font-size:16px;color:black">{{ description }}</span>
          </el-col>
        </el-row>
        <p style="height:1px;background-color:black;margin-top:40px;margin-bottom:20px" />
        <div class="tree">
          <div v-for="(item,index) in userList" :key="index" style="width:251px;height:328px;border:1px solid rgb(158, 152, 152);margin-right:10px;margin-top:16px;overflow:auto">
            <el-tree
              ref="rightsTree"
              style="margin-top:10px"
              :data="userList[index]"
              :props="defaultProps"
              show-checkbox
              node-key="code"
              :default-expanded-keys="codeList"
              :default-checked-keys="codeList"
            />
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { api_GET_RolesPermissionGroupsId } from '@/extend/api/swaggerApi/identity';
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return {
      name: '',
      description: '',
      codeList: [],
      staffId: '',
      userList: [],
      dialogVisible: false,
      data: [{
        label: 'aaa',
        children: [{
          label: 'bbbb'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  computed: {
    ...mapState({
      user: state => state.user.info.permissionGroups
    })
  },
  watch: {
    'staffId': {
      handler: function(val) {
        console.log(val);
        if (!val) return;
        this.getstaffList();
      }
    }
  },
  created() {
    for (var i = 0; i < JSON.parse(JSON.stringify(this.user)).length; i += JSON.parse(JSON.stringify(this.user)).length) {
      this.userList.push(JSON.parse(JSON.stringify(this.user)).slice(i, i + JSON.parse(JSON.stringify(this.user)).length));
    }
    for (var n = 0; n < this.userList.length; n++) {
      for (var m = 0; m < this.userList[n].length; m++) {
        for (var mn = 0; mn < this.userList[n][m].children.length; mn++) {
          this.userList[n][m].children[mn].disabled = true;
          this.$set(this.userList[n][m].children[mn], 'disabled', true);
        }
        this.userList[n][m].disabled = true;
        this.$set(this.userList[n][m], 'disabled', true);
      }
      this.userList[n].disabled = true;
      this.$set(this.userList[n], 'disabled', true);
    }
    console.log(this.userList);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    getstaffList() {
      this.$nextTick(() => {
        console.log(this.userList);
        for (var i = 0; i < this.userList.length; i++) {
          console.log(this.userList[0].length);
          this.$refs.rightsTree[i].setCheckedKeys([]);
          for (var j = 0; j < this.userList[i].length; j++) {
            this.$refs.rightsTree[i].$children[j].node.parent.childNodes[j].expanded = false;
          }
        }
      });
      api_GET_RolesPermissionGroupsId(this.staffId).then(res => {
        for (var i = 0; i < res.length; i++) {
          for (var j = 0; j < res[i].children.length; j++) {
            this.codeList.push(res[i].children[j].code);
          }
        }
        console.log(this.codeList);
        // for (var n = 0; n < this.userList.length; n++) {
        //   for (var m = 0; m < this.userList[n].length; m++) {
        //     this.$refs.rightsTree[n].$children[m].node.parent.childNodes[m].disabled = false;
        //   }
        //   this.userList[i].disabled = true;
        // }
      });
    }
  }

};
</script>

<style lang="scss" scoped>
 .tree{
   display: flex;
   flex-wrap: wrap;
 }
</style>
